<template>
  <div class="testPlan">
     <Upload style="display:inline-block" :headers='fileheader' :on-success='fileSuccess' :show-upload-list='false'
                :action="apihost+'/admin-api/admins/dateCode/upload'">
                <Button style="position:absolute;left:20px;top:20px;"  type="info">批量导入</Button>
      </Upload>
    <full-calendar
      :events="monthData"
      class="test-fc"
      first-day="1"
      locale="fr"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      lang="zh"
      @moreClick="moreClick"
    ></full-calendar>
    <Modal :mask-closable="false"
      :title="start+'日计划'"
      v-model="modalDiv"
      class-name="vertical-center-modal"
    >
      <Input v-model="title" maxlength="50" show-word-limit type="textarea" :rows="4" placeholder="请输入计划内容" />
      <div slot="footer">
            <Button v-if="id" type="error" size="large" @click="remove">删除</Button>
            <Button type="primary" size="large" :loading="btnClick" @click="ok">提交</Button>
        </div>
    </Modal>
  </div>
</template>

<script>
import { getToken } from '@/libs/util'
import { FullCalendar } from "vue-fullcalendar";
import {
  getTableData,
  add,
  update,
  del
} from '@/api/testPlan'
export default {
  data() {
    return {
      btnClick:false,
      fileheader: {
        Authorization: 'Bearer ' + (getToken() ? getToken() : '')
      },
      modalDiv: false,
      id:'',
      title: "",
      start: "",
      monthData: []
    };
  },
  methods: {
    fileSuccess (response, file, fileList) {
      this.$Message.info('导入成功')
      this.getDataList();
    },
    ok() {
      this.btnClick=true;
        if(this.id){
          let params={
            id:this.id,
          code:this.title,
          curDate:this.start
        }
        update(params).then(res => {
            if (res.code == 0) {
              this.$Message.info('修改成功');
              this.getDataList();
              this.modalDiv = false;
              this.btnClick=false
            } else {
              this.$Message.info(res.message)
              this.btnClick=false
            }
          }).catch(err => {
            console.error('err>' + JSON.stringify(err))
          })
        }else{
          let params={
          code:this.title,
          curDate:this.start
        }
        add(params).then(res => {
            if (res.code == 0) {
              this.$Message.info('新增成功');
              this.getDataList();
              this.modalDiv = false;
              this.btnClick=false
            } else {
              this.$Message.info(res.message)
              this.btnClick=false
            }
          }).catch(err => {
            console.error('err>' + JSON.stringify(err))
          })
        }

    },
    add(start) {
      this.modalDiv = true;
      this.start = start;
      this.title = "";
      this.id="";
    },
    edit(id,title,start) {
      this.modalDiv = true;
      this.id=id;
      this.title = title;
      this.start = start;
    },
    // 选择月份
    changeMonth(start, end, current) {
      console.log("changeMonth", start, end, current);
    },
    // 点击事件
    eventClick(event, jsEvent, pos) {
      this.edit(event.id,event.title, event.start);
    },
    // 点击当天
    dayClick(day, jsEvent) {
      this.add(this.timeFormat(day));
    },
    // 查看更多
    moreClick(day, events, jsEvent) {
      console.log("moreCLick", day, events, jsEvent);
    },
    timeFormat(time) {
      if(time instanceof Date==false){
        return time
      }
      const dateTime = new Date(time);
      const year = dateTime.getFullYear();
      const month = this.addZero(dateTime.getMonth() + 1);
      const date = this.addZero(dateTime.getDate());
      return year + "-" + month + "-" + date;
    },
    addZero(v) {
      return v < 10 ? "0" + v : v;
    },
    getDataList () {
      let params = {
        pageNo: 1,
        pageSize:100
      }
      getTableData(params).then(res => {
        if (res.code == 0) {
          this.monthData = res.data.list
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
    remove() {
      del({ id: this.id }).then(res => {
        if (res.code == 0) {
          this.$Message.info('删除成功')
          this.getDataList();
          this.modalDiv = false;
        } else {
          this.$Message.info(res.message)
        }
      }).catch(err => {
        console.error('err>' + JSON.stringify(err))
      })
    },
  },
  mounted(){
    this.getDataList();
  }
};
</script>

<style lang="less">
.testPlan {
  position: relative;
  .comp-full-calendar {
    max-width: none;
    .full-calendar-header .header-center span {
      font-size: 26px;
    }
    .full-calendar-body .weeks .week {
      height: 40px;
      line-height: 40px;
      background: #618af0;
      color: #fff;
      font-size: 16px;
    }
  }
  .full-calendar-body .dates .dates-events .events-week .events-day {
    min-height: 100px;
  }
}
</style>
